<template>
  <!-- 新建工艺版本的第一个弹窗 -->
  <el-dialog width="400px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body class="six">
    <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="版本名称" prop="versionName">
        <el-input id="iptC8VersionName" v-model="formData.versionName" placeholder="输入版本名称" class="w200"></el-input>
      </el-form-item>
      <el-form-item label="图号" prop="drawingNumber">
        <el-input id="iptC8DrawingNumber" v-model="formData.drawingNumber" placeholder="输入图号" class="w200"></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button id="btnC8Next" type="primary" @click="submitForm">下一步</el-button>
      <el-button id="btnC8Cancel" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const vuexProcess = namespace('TwoProcess')
@Component({
  components: {
  }
})
export default class CreateProcessDialog extends Vue {
  public $refs!: {
    form: any
  }

  @vuexProcess.Action CREAT_VERSION: any
  @vuexProcess.Action PREDATA_VERSION: any

  visible: boolean = false
  title: string = '新增工艺版本'
  level: number = 1
  formData: any = {
    drawingNumber: '',
    versionName: '',
    remark: ''
  }
  rules: any = {
    versionName: [{ required: true, message: '请填写版本名称', trigger: 'blur' }],
    drawingNumber: [{ required: true, message: '请填写图号', trigger: 'blur' }]
  }

  getData(data) {
    this.formData.drawingNumber = data
  }

  open(drawingNumber = '') {
    if (drawingNumber) {
      this.formData.drawingNumber = drawingNumber
    }
    this.visible = true
  }
  close() {
    this.$refs.form.resetFields()
    this.level = 1
    this.formData = {
      drawingNumber: '',
      versionName: ''
    }
    this.visible = false
  }

  /**
   * 点击【下一步】按钮
   * 先进行表单数据校验
   * 通过后发送新建工艺版本请求
   * 之后跳转至新增/修改工艺页面
   */
  submitForm() {
    this.$refs.form.validate((valid: any) => {
      if (valid) {
        this.preCreate(this.formData)
      }
    })
  }
  async preCreate(data: any) {
    let result = await this.CREAT_VERSION({ ...data })
    let getData = await this.PREDATA_VERSION()
    if (result && getData) {
      this.$router.push({
        name: 'add-process-detail',
        params: {
          inType: '1',
          drawingNumber: this.formData.drawingNumber,
          versionName: this.formData.versionName,
          remark:this.formData.remark
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.six {
  .footer {
    border-top: 1px solid #eee;
    padding: 10px 20px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
